<template>
  <div class="box">
    <el-dialog :title="deputyData.title" center :visible.sync="deputyData.showModal" width="650px" :close-on-click-modal="false" top="5vh">
      <div style="padding:20px;text-align:center">
        <el-checkbox :indeterminate="isIndeterminate" class="center" v-model="checkAll" @change="handleCheckAllChange">{{$t('lan.selectAll')}}</el-checkbox>
        <div style="margin: 15px 0;">
          <span class="door">{{$t('lan.numberGates')}}</span>
          <span class="price">{{$t('lan.price')}}（$）</span>
        </div>
        <el-row>
          <el-checkbox-group v-model="checkedList" @change="handleCheckedChange">
            <el-checkbox v-for="i in checkList" :label="i.code" :key="i.code">{{i.code}}
            </el-checkbox>
          </el-checkbox-group>
          <div class="price">
            <el-input v-for="i in checkList" type="number" :key="i.id" :disabled="!checkedList.includes(i.code)" v-model.number="i.price" size="small"></el-input>
          </div>
        </el-row>
      </div>
      <!-- 底部按钮开始 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="save">{{$t('lan.submit')}}</el-button>
        <el-button size="medium" @click="deputyData.showModal = false">{{$t('lan.cancel')}}</el-button>
      </span>
      <!-- 底部按钮结束 -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['deputyData'],
  data () {
    return {
      code: 'SUB_CATEGORY_CODE',
      checkAll: false,
      checkedList: [],
      checkList: [],
      isIndeterminate: false
    }
  },
  methods: {
    handleCheckAllChange (val) {
      let options = []
      for (let i of this.checkList) {
        options.push(i.code)
      }
      this.checkedList = val ? options : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.checkList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkList.length;
    },
    async getDeputyList () {
      this.checkedList = []
      const url = '/subCategory/queryList'
      const result = await this.request.httpRequest('post', url, { categoryId: this.deputyData.id })
      if (result.code == 200) {
        for (let i of result.data) {
          this.checkedList.push(i.code)
        }
        let topLength = this.checkList.length - result.data.length
        for (let i = 0; i < topLength; i++) {
          result.data.push({ code: '', price: null })
        }
        for (let [index, i] of this.checkList.entries()) {
          if (i.code === result.data[index].code) {
            i.price = result.data[index].price
          }
        }
        if (this.checkedList.length === this.checkList.length) {
          this.checkAll = true
          this.isIndeterminate = false
        } else {
          if (this.checkedList.length === 0) this.isIndeterminate = false
          else this.isIndeterminate = true
        }
      }
    },
    async getList () {
      const url = `/dict/queryList/${this.code}`
      const result = await this.request.httpRequest('GET', url)
      if (result.code == 200) {
        for (let i of result.data) {
          i.price = null
        }
        this.checkList = result.data
        this.getDeputyList()
      }
    },
    // 保存
    async save () {
      let data = []
      for (let i of this.checkList) {
        for (let j of this.checkedList) {
          if (i.code === j) {
            data.push(i.price)
            if (!i.price) {
              return this.$message({ type: "error", message: this.$t('lan.pleaseChecked') });
            }
          }
        }
      }
      if (this.checkedList.length === 0) {
        return this.$message({ type: "error", message: this.$t('lan.pleaseSelectOne') });
      }
      const url = '/subCategory/save'
      const result = await this.request.httpRequest('post', url, { categoryId: this.deputyData.id, subCategoryList: this.checkedList, subCategoryPriceList: data })
      if (result.code == 200) {
        this.deputyData.showModal = false;
        this.$message({ type: "success", message: result.msg });
        this.$emit("getRoleList");
      } else {
        this.$message({ type: "error", message: result.msg });
      }
    }
  },
  created () {
    this.getList();
  },
}
</script>
<style scoped>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.door {
  min-width: 100px;
  display: inline-block;
}
.price {
  width: 200px;
  display: inline-block;
}
.box >>> .el-checkbox {
  padding: 10px 0px;
  min-width: 40px;
  display: flex;
}
.box >>> .el-input {
  margin: 3px 0px;
}
.box >>> .el-checkbox-group {
  display: inline-block;
}
</style>